
<template>
  <div class="app-container" >
    <el-form :model="queryParams" ref="queryForm" :inline="true">
      <el-form-item style="display: block;">
        <el-button type="primary" @click="auditBatch(1)" >批量同意</el-button>
        <el-button  type="danger" @click="auditBatch(2)">批量拒绝</el-button>
      </el-form-item>
      <el-form-item label="昵称：">
        <el-input  v-model="queryParams.search" placeholder="请输入昵称"></el-input>
      </el-form-item>
      <el-form-item label="手机号码：">
        <el-input  v-model="queryParams.search" placeholder="请输入手机号"></el-input>
      </el-form-item>
      <el-form-item label="分享客状态：">
        <el-select
          v-model="queryParams.status"
          placeholder="请选择状态"
          clearable
          size="small"
          style="width: 240px"
        >
          <el-option
            v-for="item in statusOptions"
            :key="item.index"
            :label="item.name"
            :value="item.index"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="成为分享客：">
        <el-date-picker
          v-model="dateTime"
          type="daterange"
          value-format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item style="margin-left:20px">
        <el-button @click="getAuditList" type="primary">查询</el-button>
        <!-- <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button> -->
      </el-form-item>
    </el-form>
    <el-table
      :data="tableData"
      stripe
      border
      :header-cell-style="tableHeaderStyle"
      @selection-change="handleSelectionChange"
      style="width: 100%">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        label="序号"
        type="index"
        width="50">
      </el-table-column>
      <el-table-column
        width="120"
        label="头像">
        <template slot-scope="scope">
          <div class="goodsBox">
            <img :src="baseImgUrl+'/'+scope.row.headUrl" alt="">
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="昵称">
      </el-table-column>
      <el-table-column
        prop="phone"
        label="手机号">
      </el-table-column>
      <el-table-column
        prop="inviteNum"
        label="邀请人数（人）">
      </el-table-column>
      <el-table-column
        prop="consumeNum"
        label="消费次数（次）">
      </el-table-column>
      <el-table-column
        prop="consumeMoney"
        label="消费金额：（元）">
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="申请时间">
      </el-table-column>
      <el-table-column
        prop="auditStatus"
        label="状态">
        <template slot-scope="scope">
          <span>{{scope.row.auditStatus|changeStatus}}</span>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="120">
        <template slot-scope="scope" v-if="scope.row.auditStatus==0">
          <el-button
            type="text"
            @click="audit(scope.row,1)"
            size="small">
            同意
          </el-button>
          <el-button
            type="text"
            @click="audit(scope.row,2)"
            size="small">
            拒绝
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="paginationBox">
      <el-pagination
        :page-sizes="[10, 50, 100, 200]"
        :page-size.sync="queryParams.pageSize"
        :current-page.sync="queryParams.pageNum"
        @size-change="getAuditList"
        @current-change="getAuditList"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import { getAuditList,audit,auditBatch } from '@/api/setSharing'
  import Setting from '@/settings';
  export default {
    name: "sharingManage",
    data() {
      return {
        statusOptions: [
          {index:0,name:"待审核"},
          {index:1,name:"通过"},
          {index:2,name:"拒绝"},
        ],
        queryParams: {
          search:"",
          pageNum: 1,
          pageSize: 10
        },
        tableData: [],
        total:0,
        dateTime:[],
        multipleSelection:[],
        baseImgUrl: process.env.VUE_APP_FILE_URL,
        tableHeaderStyle: Setting.tableHeaderStyle,
      }
    },
    watch: {
      dateTime(val){
        if(val.length>0){
          this.queryParams.startTime=val[0]
          this.queryParams.endTime=val[1]
        }
      }
    },
    filters:{
      changeStatus(val){
        switch(val) {
          case 1:
            return  "通过"
            break;
          case 2:
            return  "拒绝"
            break;
          default:
            return  "待审核"
        }
      }
    },
    mounted() {
      this.getAuditList()
    },
    methods: {
      goAdd(){
        this.$router.push("/addSharing")
      },
      handleSelectionChange(val) {
        console.log(val)
        this.multipleSelection = val
      },
      resetQuery(){
        this.queryParams={
          pageNum: 1,
          pageSize: 10
        }
        this.dateTime=[]
        this.getAuditList()
      },
      getAuditList(){
        getAuditList(this.queryParams).then(res=>{
          if(res.code == 200){
            this.tableData = res.data.list
            this.total = res.data.total
          }
        })
      },
      audit(row,status){
        audit(
          {
            "id":row.id,
            "auditStatus":status,
            "update_id": JSON.parse(this.$store.getters.userInfo).id ? JSON.parse(this.$store.getters.userInfo).id : '1'
           }
        ).then(res=>{
            if(res.code == 200){
              this.$message({
                message: '审核成功',
                type: 'success'
              })
              this.getAuditList()
            }else{
              this.$message.error(res.msg);
            }
        })
      },
      auditBatch(type){
        if(this.multipleSelection.length == 0){
          this.$message("请选择分享客")
          return false
        }
        let ids =[]
          this.multipleSelection.forEach(item=>{
            ids.push(item.id)
          })
        auditBatch(
        {
          "targetIds":ids.join(','),
          "status":type,
        }
        ).then(res=>{
          if(res.code == 200){
            this.$message({
              message: '审核成功',
              type: 'success'
            })
            this.getAuditList()
          }else{
            this.$message.error(res.msg);
          }
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  .goodsBox{
    width: 80px;
    height: 80px;
    margin: auto;
    img{
      width: 100%;
    }
  }
  ::v-deep .el-input--medium .el-input__inner{
    width: 90%;
  }
  ::v-deep .el-form-item__label{
    padding: 0;
  }
  ::v-deep .el-input--small .el-input__inner {
    height: 36px;
    line-height: 36px;
}
::v-deep .el-select > .el-input{
  width: 90%;
}
::v-deep .el-table .cell{
  text-align: center;
}
// ::v-deep .el-table--border td{
//     border-right: none!important;
// }
// ::v-deep .el-table--border th{
//     border-right: none!important;
// }
// ::v-deep .el-table--border{
//   border: none;
// }
// .el-table--striped .el-table__body tr.el-table__row--striped td{
//   background:none;
// }
</style>
